<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标题</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src='js/jquery-3.2.1.js'></script>
		<script src='js/bootstrap-3.3.7-dist/js/bootstrap.min.js'></script>
	</head>
	<body>
		<div id="box">
			<ul class="left_box">
				<li >
					<a href="#node">node</a>
				</li>
				<li >
					<a href="#js">js</a>
				</li>
				<li >
					<a href="#git">git</a>
					<a href="">我喜欢大姨妈</a>
					<a href="">我永远喜欢大姨妈</a>
				</li>
				<li>
					<a href="">回到顶部</a>
				</li>
			</ul>
			<ul class="right_box">
				<li title="node"  id="node">
					<h2>安装npm/vue/react</h2>
					<dl>
						<div>
							<h3>node安装</h3>
							<div>
								<h4>一.使用之前,首先掌握3个东西是用来干什么的</h4>
								<p><code>npm:</code>Nodejs下的包管理器</p>
								<p><code>webpack:</code>他主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如说<code>资源的合并和打包</code></p>
								<p><code>vue-cli:</code>用户生成 <code>Vue工程模板</code> (帮你快速开始创建一个vue项目,包含基础的依赖库,只需要<code>npm install</code>就可以开始安装了)</p>
								<p>下载途径:<a href="https://nodejs.org/en/">nodejs</a>(推荐下载稳定版)</p>
								<p>下载完后,可以放到其他的盘,我的就在C盘<code>C:\Program Files\nodejs</code> (默认会添加paht环境变量..一直点Next就可以)</p>
								<p><img src="img/nodejs_1.png"/></p>
								<p>打开CMD(<code>window+r</code>打开dos)检查是否安装成功</p>
								<p><img src="img/nodejs_2.png"/><br /><br /><img src="img/nodejs_3.png"/></p>
								<p>其次另外一个很重要的一点,就是我们的path环境变量</p>
								<p><img src="img/nodejs_4.png"/></p>
								<p>我的path:<code>C:\Users\Administrator\AppData\Roaming\npm</code> (如果没有的话,可能会报BUG,会说没有npm)</p>
								<hr />
								<h3>清除缓存的方法----拓展</h3>
								<p>一般来说,我们安装依赖包,存在着由于网速或者本地的一些问题都会导致我们安装失败.这个时候我们就需要清除缓存,然后再重新安装.来达到我们的目的.<br />清除缓存:<code>npm cache clean -f</code></p>
								<p>有时候,有可能会存在另外一种情况,我们的环境变量并没有任何问题,有可能是缓存导致的,这个时候我们不妨清除一个缓存<br />清除缓存: <code>npm cache clean -force</code></p>
								<hr />
								<h3>安装淘宝镜像------拓展</h3>
								<p>很多时候,我们安装所需要的依赖包,都是国外的.这就导致我们的网速会受到限制,也导致了我们安装缓慢,又或者安装失败,为了防止这种情况.国内也给出了一个较为方便的方法--<淘宝镜像></p>
								<p><a href="https://npm.taobao.org">淘宝镜像下载的链接</a>可以点进去下载(也可以用下面我们的方法)</p>
								<p>淘宝镜像: <code>npm install -g cnpm --registry=https://registry.npm.taobao.org</code></p>
								<p>这样,下次install依赖包的时候只需要在前面加上一个<code>c</code>就可以了.也就是cnpm.比如说<code>cnpm install axios --save</code></p>
							</div>
						</div>
						<div>
							<h3>安装vue-cli(vue脚手架)</h3>
							<div>
								<p>vue-cli脚手架模板是基于node下的npm来完成安装的.所以首先需要安装<code>node</code></p>
								<ol style='padding-left: 1rem;'>
									<li>1.安装<code>node,vue</code>运行需要基于<code>npm</code>一定的版本,所以首先升级npm到最新的版本(可以选择安装淘宝镜像,可以大幅度提升我们的安装速度)</li>
									<li>2.打开dos窗口,执行<code>cnpm install vue-cli -g </code> 全局安装vue-cli</li>
									<li>3.通过<code>vue -V</code>查看vue版本</li>
								</ol>
								<h4>创建项目</h4>
								<p>执行命令:<code>vue init webpack demo</code>(你新建的项目名称/文件名称)</p>
								<p><img src="img/nodejs_5.png"/></p>
								<p>一般创建顺序:回车/回车/回车/回车/Y/N/N/N/N/回车</p>
								<p>进入项目 <code> cd demo </code></p>
								<p>安装需要的依赖包(如果需要的话,一般来说做一歩,安装一步.所以不要着急) <code>npm install Xxx </code>(Xxx:需要的插件)</p>
								<p>执行项目 <code> npm run dev </code></p>
								<p><img src="img/nodejs_6.png" alt="" /></p>
								<p style='color:red;font-size: 2.3rem;'>看到这里就说明你已经创建成功了!加油 </p>
								<hr />
								<h3>各大环境-介绍----(拓展)</h3>
								<p>一般来说会有<code>开发环境</code><code>测试环境</code><code>生产环境</code></p>
								<ol>
									<li>专业一点的解释</li>
									<li><code>开发环境:</code> 开发环境是程序员们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告</li>
									<li><code>测试环境:</code> 一般是克隆一份生产环境的配置,一个程序在测试环境上工作不正常,那么肯定不能把它发布到生产机上.</li>
									<li><code>生产环境:</code> 是指正是提供对外服务的,一般会关掉错误报告,打开错误日志</li>
									<li>三个环境也可以说是系统开发的三个阶段:开发->测试->上线,其中生产环境也就是通常说的真实环境,可以比作是一个能够营业的生产线,能够为<code>企业带来利益的阶段</code></li>
								</ol>
								<ol>
									<li>较为普通的解释</li>
									<li><code>开发环境:</code> 项目还在开发中...也就是正在编程阶段.这个时候我们编写的代码一般都是在开发环境,而不是在生产环境,生产环境组成: <code>操作系统,web服务器,语言环境,php,数据库...</code></li>
									<li><code>测试环境:</code> 项目已经搭建出来,这个时候我们开始进行性能优化,解决bug.提高用户体验程度</li>
									<li><code>生产环境:</code> 项目前后端都已经准备好,已经可以有用户进行访问.可以说已经正式运行开始营业了</li>
									<li>总的来说,就是先在开发环境中开发,然后再测试环境中测试项目,最后在上传到生产环境上,也就是先线上环境</li>
								</ol>
								<hr />
								<h4>项目文件配置介绍(线上需求)</h4>
								<p>build config 是关于webpack的配置,里面包括一些server的端口;</p>
								<p>node_modules:安装依赖代码库;</p>
								<p>src:存放源码</p>
								<p>static:存放第三方静态资源的,static里面的gitkeep,如果为空,也可以提交到GitHub上,一般来说,是不能提交的</p>
							</div>
						</div>
						<div>
							<h3>安装react</h3>
							<div>
								
							</div>
						</div>
					</dl>
				</li>
				<li title="js" name='js' id="js">
					<h2>js基础</h2>
					<dl>
						<div>
							<h3>js是干什么的</h3>
							<div>
								<p><code>JavaScript</code>一种直译式<a >脚本语言</a>，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的<a >脚本语言</a>，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。  </p>
								<p>我的理解为,通过js,我们可以把一个页面可以按照我的意思已经渲染,执行相对应的功能,生成相应的效果,比如说显示颜色、更改时间、跳转页面</p>
								<p>术语一点,js是一种页面脚本，通过<code>执行程序</code>片段，我们可以对页面及页面上的元素进行操作,实现特定的功能与效果</p>
								<p>总体来说,<code>我们可以通过JS来实现与浏览器交互</code>可以添加一些动的的东西,修改样式之类的</p>
							</div>
						</div>
						<div>
							<h3>什么是事件？</h3>
							<div>
								<p>事件(计算机术语)</p>
								<p>事件可以被控件识别的操作,如按下确定按钮,选择某个<code><a href="#radio">单选按钮</a></code>或者<code><a href="#checkbox">复选按钮</a></code></p>
								<p>事件有<code>系统事件</code>和<code>用户事件</code>.系统事件由系统激发,比如说每个24小时,银行储存的存款日期增加一天。用户事件由用户激发，比如说用户点击按钮，在文本框中显示特定的文本。<code><a href="#event">事件驱动</a></code><code>事件驱动</code>控件执行某项功能</p>
								<p>触发事件的对象称为事件发送者；接受事件的对象称为事件接受者。</p>
								<p>使用事件机制可以实现：当类对象的某个状态发生变化时，系统将会通过某种途径调用类中的有关处理这个事件的方法或触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。</p>
							</div>
						</div>
						<div>
							<h3>什么是成员属性？</h3>
							<div>
								<h4>JavaScript对象</h4>
								<p>JavaScript中的所有事物都是对象：字符串、数值、数组、函数。。。</p>
								<p>此处，JavaScript允许自定义对象</p>
								<hr>
								<h4>所有事物都是对象</h4>
								<p>JavaScript提供多个内建对象，比如String、date、Array等等。对象只是带有属性和方法的特殊类型</p>
								<ul>
									<li>布尔型可以是一个对象。</li>
									<li>数字型可以是一个对象</li>
									<li>字符串也可以是一个对象</li>
									<li>日期是一个对象</li>
									<li>数字和正则表达式也是对象</li>
									<li>数组是一个对象</li>
									<li>甚至函数也可以是对象</li>
								</ul>
								<hr>
								<h4>JavaScript对象</h4>
								<p>对象只是一种特殊的数据。对象拥有属性和方法。</p>
								<hr>
								<h4>访问对象的属性</h4>
								<p>属性是与对象相关的值。</p>
								<p>访问对象属性的语法是：</p>
								<p><code>objectName.propertyName</code></p>
								<p>这个例子使用了String对象的Length属性来获得字符串的长度：</p>
								<p><code>var message="Hello World!"</code></p>
								<p><code>var x=message.length;</code></p>
								<p>在以上代码执行后,x的值将是:</p>
								<p><code>12</code></p>
								<hr>
								<h4>访问对象的方法</h4>
								<p>方法是能够在对象上执行的动作。</p>
								<p>您可以</p>
							</div>
						</div>
						<div>
							<h3>变量？</h3>
							<div>
								<h4>什么是变量？</h4>
								<p>
									变量就是给一个东西起一个别名
								</p>
							</div>
						</div>
						<div>
							<h3>函数</h3>
							<div>
								<h3>函数的基本格式</h3>
								<pre>
	格式1：
	function Xxx(){
		代码
	}
	Xxx()
								</pre>
								<hr>
								<h4>函数的的基本概念（定义与调用）</h4>
								<p>函数定义：只是告诉你系统有这个函数，不会实际执行</p>
								<p>函数调用：真正执行函数里的代码</p>
								<p>关系与区别：</p>
								<pre>
	function show(){//定义

	}
	show();//调用
								</pre>
								<hr>
								<h4>网页换肤-</h4>
								<p>以下是一个网页换肤的简易代码</p>
								<pre>
									<code>
	<span>head</span>
	&lt;link rel="stylesheet" href="css1.css" id='link'/&gt;
									</code>
									<code>
	<span>body</span>								
	&lt;input type="button" onclick="skin1()" value="皮肤1" &gt;									
	&lt;input type="button" onclick="skin2()" value="皮肤2" &gt;									
									</code>
									<code>
	<span>js</span>								
	function skin1(){
		var ol = document.getElementById('link');
		ol.href='css1.css'
	}

	function skin2(){
		var ol = document.getElementById('link');
		ol.href='css2.css'
	}
									</code>
								</pre>
								<ul>
									<li>1.任何标签都可以加<code>id</code>，如果你想的话，你可以给<code>html</code>加<code>id</code></li>
									<li>2.任何标签内的任何属性，都可以修改比如说<code>href</code></li>
									<li>3.根据html里面的属性如何写，那么我们就如何在js里面怎么写。</li>
								</ul>
								<h4>函数传参</h4>
								<p>对于一个函数来说，他的功能一般体现在传参</p>
								<p></p>
							</div>
						</div>
						<div>
							<h3>if判断</h3>
							<div>
								<h4>if用处</h4>
								<p>if （如果）---判断</p>
								<pre>
									<code>
	if(条件){//如果符合条件则执行语句1,执行完后退出循环
		语句1
	}else if(条件){
		语句2
	}else if(条件){
		语句3
	}else{
		语句4
	}
									</code>
								</pre>
								<hr>
								<pre>
									<code>
	if(div是显示的){
		div.style.display='none';
	}else{
		div.style.display='block';
	}
									</code>
								</pre>
							</div>
						</div>
						<div>
							<h3>拓展</h3>
							<div>
								<h4>为a链接添加JS</h4>
								<pre>
									<code>
	&lt;a href='javascript:;'&gt;我是一个a标签&lt;/a&gt;	//阻止跳转---不会发生页面跳转						
									</code>
								</pre>
								<hr>
								<h4>className</h4>
								<pre>
									<code>
	<span>css</span>
	&lt;style&gt;
		.red{width: 100px;height: 100px;background: red;}
	&lt;/style&gt;

	<span>js</span>
	&lt;script&gt;
	 function toRed(){
		var oDiv=document.getElementById('div1');
		oDiv.className='red'
	 }
	&lt;/script&gt;

	<span>html</span>
	&lt;input type='button' value='变红' /&gt;
	&lt;div id="div1"&gt;&lt;/div&gt;								
									</code>
								</pre>
							</div>
						</div>
						<div>
							<h3>Dom基础</h3>
							<div>
								<h4>什么叫Dom？</h4>
								<div>
									<p>标签(css)=元素(js)=节点(Dom)</p>
									<p>节点：</p>
									<ul>
										<li><code>childNodes.length</code>Ie6~Ie8一般来说会正常显示,就是会把空白算上去</li>
										<li><code>nodeType</code>用来告诉我们节点的类型</li>
										<ul>
											<li>nodeType==3 ->文本节点</li>
											<li>nodeType==1 ->元素节点</li>
										</ul>
										<li>Children</li>
										<li>fdasfsa：文本节点</li>
										<li>< span > qrew < span>元素节点</li>
									</ul>
									
								</div>
							</div>
						</div>
					</dl>
				</li>
				<li title="git" name='git' id="git">
					<h2>git</h2>
					<dl>
						<div>
							<h3>推荐教程<a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">啦啦啦啦</a></h3>
							<h3>使用git</h3>
							<div>
								<p>git是分布式版本控制系统</p><hr>
								<p>首先安装git客户端</p>
								<p>在很久以前，linux是一个开源的项目，linux为了存储linux代码开发者贡献的代码，开发了一个品台就是GitHub，只要目的就是为了存储代码</p>
								<p>最初git只有linux版本的，后来windows和mac也上线了，</p>
								<p>建议使用linux的</p>
								<br><hr>
								<ul>
									<li>Linux常用指令</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pwd		:查看当前目录地址</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cd		:打开某个目录</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mkdir	:创建一个文件夹的</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ls		:查看目录文件的</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo 内容>>文件名称</li>
								</ul>
								<br><hr>
								<ul>
									<li>常用git指令</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git init	:初始化一个git项目的，一旦执行，会看到一个。git文件夹，本地的代码存储库，我们可以在里面新建项目和文件</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git status	:查看当前状态(当前那些文件可以提交,那些不能提交)</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git add		:添加提交的文件</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git rm		:删除可以提交的文件</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;git commit -m"提交说明":说明本次提交的内容(比如说这次到底干了什么)</li>
									<li></li>
								</ul>
								<br><hr>
								<ul>
									<li>本地库有两种状态</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一种是已存入缓存：下一步可以提交的在objects能看到</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;另一种是已提交的：通过<code>commit</code>指令提交过的，此时我们可以refs/heads下面可以看到</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;还有一种文件是没有管理的，此时这类文件一旦删除就找不回来 </li>
									<li>提交在本地的，一旦电脑坏了，文件就再也找不到了，更安全的方式是提交在云服务器上</li>
									<li>通过<code>git -help</code></li>
								</ul>
								<hr>
							</div>
						</div>
						<div>
							<h3>分布式和集中式的区别</h3>
							<div>
								<h4>集中式SVN</h4>
								<p>有一台中央处理器，所有的代码都提交到这儿，有网速的限制，如果中央服务器出了问题，可能丢失数据</p>
								<hr>
								<h4>分布式Git</h4>
								<p>没有中央服务器的概念，每个人的电脑都是中央服务器（版本库），如果修改的话，只需要推送到远程仓库（远程版本库Repository），</p>
							</div>
						</div>
						<div>
							<h3>版本库</h3>
							<div>
								<h4>什么是版本库？</h4>
								<p>版本库又名仓库,英文名repository,可以理解为一个目录，这个目录里的所有文件都可以被Git管理，每个文件的修改、删除，git都能追踪，以便于随时追踪历史</p>
								<hr>
								<h4>创建版本库</h4>
								<p><code>mkdir Xxx</code></p>
								<p><code>cd Xxx</code></p>
								<p><code>pwd</code>查看目录</p>
								<p><code>git init</code>创建版本库</p>
								<p><code>ls -as</code>显示隐藏</p>
								<br>
								<p>只能跟踪文本文件的改动，比如TXT文件，html文件，对于他们而言，只能发现大小的变化，比如说100kb==》》》120kb，或者名字的改动</p>
								<p>但是值得一提的是，他无法观察到word的改动，只能通过内存大小来判断</p>
								<hr>
								<h4>提交到仓库</h4>
								<p>第一步：<code>git add Xxx</code>用命令告诉电脑我要提交数据</p>
								<p>第二步：<code>git commit -m'解释'</code>对本次操作进行解释</p>
								<p>话说git add 可以执行多次，而git commit -m‘’是对操作进行解释</p>
								<hr>
								<p><code>modified</code></p>
							</div>
						</div>
						<div>
							<h3>时光穿梭机（查看以前版本）</h3>
							<div>
								<h4>创建一个reademe.txt文件,现在,是时候继续工作了,这个时候我们填写一下内容</h4>
								<pre>
									<code>
	hello vue
	hello sashilera
									</code>
								</pre>
								<p>这个时候，我们运行<code>git status</code>来查看效果</p>
								<pre>
									<code>
	$ git status
	On branch master
	Changes not staged for commit:
	  (use "git add <file>..." to update what will be committed)
	  (use "git checkout -- <file>..." to discard changes in working directory)

	    modified:   readme.txt

	no changes added to commit (use "git add" and/or "git commit -a")
									</code>
								</pre>
								<p><code>git status</code>命令可以帮助我们了解版本库的状态,上述代码告诉我们,<code>readme.txt</code>已经被我们修改过了,但是这个时候还没有提交过</p>
								<p>但是我们还是不清楚到底修改了什么具体内容,我们可以通过<code>git diff</code>这个命令来查看</p>
								<pre>
									<code>
	$ git diff readme.txt 
	diff --git a/readme.txt b/readme.txt
	index 46d49bf..9247db6 100644
	--- a/readme.txt
	+++ b/readme.txt
	@@ -1,2 +1,2 @@
	-hello Vue.
	+hello sashilera.
									</code>
								</pre>
								<p><code>git diff</code>我们只看后面的diff，顾名思义其实就是different的意思，不同的。通过他我们可以对比显示出，两次的却别到底在哪里</p>
								<p>然后这个时候我们就可以提交了用<code>git add</code></p>
								<hr>
								<h4>回退上一个版本</h4>
								<p></p>
							</div>
						</div>
						<div>
							<h3></h3>
							<div>
								
							</div>
						</div>
					</dl>
				</li>
			</ul>
		</div>
	</body>
</html>
